<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>配置管理</el-breadcrumb-item>
      <el-breadcrumb-item>公告列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" class="toolbar">
        <el-form-item>
          <el-button @click="addRoot" type="success" style="padding:8px 10px; font-size: 12px;">添加公告</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        highlight-current-row
        v-loading="gridLoading"
        class="grid"
        style="width: 100%；"
      >
        <el-table-column label="id" prop="id" width="80"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <!-- <el-table-column label="内容" prop="content" >
                     <template slot-scope="scope">
                         <div v-html="getitem(scope.row.content)" class="content"></div>
                     </template>
        </el-table-column>-->
        <el-table-column label="时间" prop="createTime"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="check(scope.row)">编辑</el-button>
            <!-- <el-button size="small" @click="check(scope.row)">修改</el-button> -->
          </template>
          <!-- <template slot-scope="scope">
              
                  <el-button size="small" @click="check(scope.row)">修改</el-button>
          </template>-->
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchfrom.pageNo"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="searchfrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="添加公告" :visible.sync="addDialogVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-position="left" label-width="100px" ref="addForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" auto-complete="off" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <squill-editor-qiniu
            :token="form.token"

            v-model="addForm.content"
            :domain="form.domain"
            :uploadUrl="form.Url"
            ref="squill"
          ></squill-editor-qiniu>
          <!-- <quill-editor v-model="addForm.content" ref="myQuillEditor"></quill-editor> -->
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmit" :loading="addFormLoading">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑公告" :visible.sync="editDialogVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-position="left" label-width="100px" ref="editForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" auto-complete="off" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <squill-editor-qiniu
            :token="form.token"

            v-model="editForm.content"
            :domain="form.domain"
            :uploadUrl="form.Url"
            ref="squill"
          ></squill-editor-qiniu>
          <!-- <quill-editor v-model="editForm.content" ref="myQuillEditor" ></quill-editor> -->
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFormSubmit" :loading="editFormLoading">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SquillEditorQiniu from "@/components/quill-editor/quill-editor";
export default {
  data() {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      content1: "",
      dataList: [],
      editForm: {
        id: "",
        title: "",
        content: "",
        remark: ""
      },
      addForm: {
        id: 0,
        title: "",
        content: "",
        remark: ""
      },
      searchfrom: {
        pageNo: 1,
        pageSize: 10
      },
      form: {
        token: '', //七牛token
        Url: '', //获取上传路径
        domain: '' //上传路径 二级
      },
    };
  },
  components: {
    SquillEditorQiniu 
  },
  created() {
    this.getanncment();
    this.getQnToken();
  },
  computed: {},
  methods: {
    async getQnToken(){
      const { data: res } = await this.$http.post('/manage/userFile/qiNiuUpload', {})
      console.log(res.data.token);
      this.form.token = res.data.token;
      //this.params.token=res.data.token;
			this.form.domain = res.data.domain;
			this.form.Url = res.data.upload_url;
    },
    getitem(row) {
      console.log(row);
      let c1 = row.replace(/<img style="width: 100px;height: 50px;"/g, "<img");
      let c2 = c1.replace(/<img/g, '<img style="width: 100px;height: 50px;"');
      this.content1 = c2;
      return this.content1;
    },
    check(row) {
      console.log(row);
      //console.log(this.$refs.squill);
      this.editForm.id = row.id;
      this.editForm.title = row.title;
      this.editForm.content = row.content;
      this.editForm.remark = row.remark;
      this.editDialogVisible = true;
      this.$refs.squill.content=row.content;

      
    },
    editFormSubmit() {
      this.$http
        .post("/manage/conf/announcementAddEdit", this.editForm)
        .then(res => {
          this.editDialogVisible = false;
          if (res.data.status == 1) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.getanncment();
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },
    addRoot() {
        this.addForm.id = ""
        this.addForm.title= ""
         this.addForm.content= ""
           this.addForm.remark= ""
      this.addDialogVisible = true;
    },
    // 监听 pagesize 的变化
    handleSizeChange(newSize) {
      // 把最新的 pagesize 赋值给 this.queryinfo
      this.searchfrom.pageSize = newSize;
      this.getanncment();
    },
    // 监听 页码值 的变化
    handleCurrentChange(newPageNum) {
      console.log(newPageNum);
      this.searchfrom.pageNo = newPageNum;
      this.getanncment();
    },
    addFormSubmit() {
      // let c1 = this.addForm.content.replace(/</g, "&lt;");
      // let c2 = c1.replace(/&lt;/g, "<");
      // let c3 = c2.replace(/>/g, "&gt;");
      // let c4 = c3.replace(/&gt;/g, ">");
      // this.addForm.content = c4;

      console.log(this.addForm);
      this.$http
        .post("/manage/conf/announcementAddEdit", this.addForm)
        .then(res => {
          // console.log(res)
          this.addDialogVisible = false;
          if (res.data.status == 1) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.getanncment();
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },
    getanncment() {
      this.$http
        .post("/manage/conf/announcementList", this.searchfrom)
        .then(res => {
          if (res.data.status == 1) {
            // console.log()
            this.dataList = res.data.data.list;
            this.total = res.data.data.total;
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  img {
    width: 100px;
    height: 50px;
  }
}
</style>
